<template>
  <h1>用户贷款执行利率计算</h1>
  <el-row :gutter="20">
    <el-col :span="5"><div class="grid-content ep-bg-purple"></div></el-col>
    <el-col :span="10">
      <el-form :model="user"  ref="ruleFormRef"   :rules="rules" label-width="150px">
        <el-form-item label="存款日均余额:"  prop="dailyBal" >
<!--          <el-input v-model.number="user.dailyBal" />-->
          <el-input-number
              v-model="user.dailyBal"
              :precision="2"
              :min="0"
              :max="100000000.00"
              controls-position="right"
              size="large"
          />
        </el-form-item>
        <el-form-item label="所在城市:" prop="city">
          <el-select v-model="user.city" class="m-2" placeholder="选择" size="large">
            <el-option
                v-for="item in city_options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="基准利率(%):" prop="baseIntRate">
          <el-select v-model="user.baseIntRate" class="m-2" placeholder="选择" size="large">
            <el-option
                v-for="item in baseRate_options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm(ruleFormRef)">查询</el-button>
          <el-button   @click="resetForm(ruleFormRef)" >重置</el-button>
        </el-form-item>
        <el-form-item label="浮动点数:">
          <el-text>{{floatPoint}}</el-text>
        </el-form-item>
        <el-form-item label="贷款最终执行利率(%):">
          <el-text>{{intRate}}</el-text>
        </el-form-item>
      </el-form>
    </el-col>
    <el-col :span="5"><div class="grid-content ep-bg-purple"></div></el-col>
    <el-col :span="20">
    </el-col>
  </el-row>
</template>

<script  setup lang="ts">
import {reactive, ref} from "vue"
import type { FormInstance, FormRules } from 'element-plus'
import {getCalculatorReq} from "@/api/calculator";
import {elMessage} from "@/hooks/use-element";
import { ElMessage } from 'element-plus'
const  user = reactive({
  name: ' ',
  dailyBal: '0.0',
  city: '',
  addr:'',
  baseIntRate:''

})

const floatPoint = ref(0.00)
const intRate = ref(0.00)

const rules = reactive<FormRules>({

  dailyBal: [
      { required: true, message: '没有输入！', trigger: 'blur' },

    ],
  city: [
    { required: true, message: '没有输入！', trigger: 'blur' },


  ],
  baseIntRate: [
    { required: true, message: '没有输入！', trigger: 'blur' },],
})
const city_options= [
  {
    value: '北京',
    label: '北京',
  },
  {
    value: '上海',
    label: '上海',
  },
  {
    value: '广州',
    label: '广州',
  },
  {
    value: '深圳',
    label: '深圳',
  },
  {
    value: '贵阳',
    label: '贵阳',
  },
  {
    value: '银川',
    label: '银川',
  },
  {
    value: '拉萨',
    label: '拉萨',
  },
  {
    value: '西宁',
    label: '西宁',
  },
]

const   baseRate_options=[
  {
    value: '4.35',
    label: '一年以内4.35%',
  },
  {
    value: '4.75',
    label: '一年至五年4.75%',
  },
  {
    value: '4.90',
    label: '五年以上4.90%',
  },
]
const ruleFormRef = ref<FormInstance>()
const resetForm = (formEl: FormInstance | undefined) => {
  console.log(formEl)
  if (!formEl) return
  formEl.resetFields()
  restData()
  console.log(user,"end")
}
function restData() {
  floatPoint.value = 0.0
  intRate.value = 0
}
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {


    if (valid) {
      console.log('submit!')
      restData();
      getCalculatorReq(user).then(data=>{
        console.log("查询成功",data);
        ElMessage.closeAll()
        elMessage('查询成功')
        floatPoint.value = data.floatPoint;
        intRate.value = data.intRate.toFixed(4);
      },(err)=>{

        console.log(err);
      })
    } else {
      console.log('error submit!', fields)
    }
  })
}

</script>

<style scoped>

</style>
